<template>
	<view class="content">
		<view class="flx">
			<view class="name">
				<span class="red">*</span>
				姓名
			</view>
			<view class="ipt">
				<input @input="checkNum($event)" type="text" v-model.trim="formData.userName" placeholder="请输入姓名"
					placeholder-class="placeholder">
			</view>

		</view>
		<view class="error" v-if="rules.name == false">
			请输入姓名
		</view>
		<view class="flx">
			<view class="name">
				<span class="red">*</span>
				手机号码
			</view>
			<view class="ipt">
				<input @input="checkPhone($event)" type="text" v-model.trim="formData.userMobile" placeholder="请输入11位手机号"
					placeholder-class="placeholder" maxlength="11">
			</view>
		</view>
		<view class="error" v-if="rules.phone == false">
			请输入正确的手机号码
		</view>
		<view class="flx">
			<view class="name">
				<span class="red">*</span>
				所在地区
			</view>
			<view class="ipt">
				<uni-data-picker style="width: 100%;" :localdata="addressList" @change="onchange"
					@nodeclick="onnodeclick">
					<view class="" :class="region == '请选择省、市、区' ? 'placeholder' : 'picker'">
						{{region}}
					</view>
				</uni-data-picker>
			</view>
		</view>
		<view class="error" v-if="rules.address == false">
			请选择省市区
		</view>
		<view class="flx">
			<view class="name">
				<span class="red">*</span>
				地址
			</view>
			<view class="ipt ipt2">
				<textarea @input="checkAddress($event)" v-model.trim="detailAddress" placeholder="小区、写字楼、门牌号等"
					placeholder-class="placeholder"></textarea>
			</view>
		</view>
		<view class="error" v-if="rules.addressDetail == false">
			请输入详细地址
		</view>
		<!-- <view class='flx' style="margin-top: 60rpx;">
			<view class='name'>设为默认收货地址</view>
			<view class="switch">
				<u-switch v-model="switchValue" activeColor="#3eaafb" @change="switchChange"></u-switch>
			</view>
		</view> -->

		<view class="save" @click="save">保存</view>
	</view>
</template>

<script>
	import address from '../../static/js/address.js'
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				formData: {
					userName: '',
					userMobile: '',
					recycleAddress: '',
					isDefault: true
				},
				region: '请选择省、市、区',
				detailAddress: '',
				addressList: [],
				rules: {
					name: true,
					phone: true,
					address: true,
					addressDetail: true,
					phoneNumberFormat:true
				},
				switchValue: true,
				addressData:[],
				page:1,
				limit:5
			};
		},

		onLoad() {
			// 设置导航栏的颜色和标题颜色
			uni.setNavigationBarColor({
				frontColor: "#000000", //文字颜色
				backgroundColor: "#FFFFFF" //底部背景色
			})
			this.addressList = address.provinces
			this.getRecycleAddressData()
		},

		methods: {
			// 方法
			checkNum(e) {
				let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
				
				this.rules.name = true
				console.log(val);
				if (!val) {
					this.val = '';
					return
				}
			},
			// 获取地址
			getRecycleAddressData() {
				request.get('/api/recycle/address/page', {
					page: this.page,
					limit: this.limit
				}).then(res => {
					if (res.code == 0) {
						console.log(res.data, '2222211111111111111')
						this.addressData = res.data.list
			            console.log(this.addressData,'this.addressData')
						if(this.addressData.length == 0){
							this.formData.isDefault = true
						}
					}
				})
			},
			checkPhone(e) {
				let val = e.target.value.replace(/(^1\d{10}$)|(^[0-9]\d{7}$)/, "")
				var phoneReg = /(^1\d{10}$)|(^[0-9]\d{7}$)/;
				console.log(val,'2222222');
				console.log(phoneReg.test(e.target.value),'111111111')
				if (phoneReg.test(e.target.value) == true) {
					this.rules.phone = true
					this.val = '';
					return
				}
			},
			checkAddress(e) {
				let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
				this.rules.addressDetail = true
			},
			onchange(e) {
				const value = e.detail.value
				this.region = e.detail.value[0].text + '' + e.detail.value[1].text + '' + e.detail.value[2].text;
			},

			onnodeclick(e) {
				this.rules.address = true
				console.log(e, '333333333333333333333333');
			},

			switchChange: function(e) {
				this.formData.isDefault = e
				console.log('switch1 发生 change 事件，携带值为', e)
			},
			save() {
				let that = this
				var phoneReg = /(^1\d{10}$)|(^[0-9]\d{7}$)/;
				if (that.formData.userName == '') {
					this.rules.name = false
				} else if (that.formData.userMobile == '' || phoneReg.test(that.formData.userMobile) == false) {
					this.rules.phone = false
				} else if (that.region == '请选择省、市、区') {
					this.rules.address = false
				} else if (that.detailAddress == '') {
					this.rules.addressDetail = false
				} else if (that.addressData.length == 0) {
					console.log('1111111111111111111111111111111111111')
					
					uni.showModal({
						content: '你确定要新增收货地址吗？',
						success: function(res) {
							console.log('success', that.formData);
							that.formData.recycleAddress = that.region + ' ' + that.detailAddress
							if (res.confirm) {
								request.post('/api/recycle/address/add',
									that.formData
								).then(res => {
									if (res.code == 0) {
										uni.showToast({
											title: '添加成功',
											icon: 'none',
											duration: 2000
										})
										setTimeout(() => {
											uni.navigateTo({
												//保留当前页面，跳转到应用内的某个页面
												url: '/pagesA/address-management/address-management'
											})
										}, 2000)
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 2000
										})
									}
								})
							} else if (res.cancel) {

							}
						}
					});
				} else if(that.addressData.length !== 0){
					console.log('2222222222222222222222222222222222')
                    that.formData.isDefault = false
                    uni.showModal({
                    	content: '你确定要新增收货地址吗？',
                    	success: function(res) {
                    		console.log('success', that.formData);
                    		that.formData.recycleAddress = that.region + ' ' + that.detailAddress
                    		if (res.confirm) {
                    			request.post('/api/recycle/address/add',
                    				that.formData
                    			).then(res => {
                    				if (res.code == 0) {
                    					uni.showToast({
                    						title: '添加成功',
                    						icon: 'none',
                    						duration: 2000
                    					})
                    					setTimeout(() => {
                    						uni.navigateTo({
                    							//保留当前页面，跳转到应用内的某个页面
                    							url: '/pagesA/address-management/address-management'
                    						})
                    					}, 2000)
                    				} else {
                    					uni.showToast({
                    						title: res.msg,
                    						icon: 'none',
                    						duration: 2000
                    					})
                    				}
                    			})
                    		} else if (res.cancel) {
                    
                    		}
                    	}
                    });
				}

			}
		},

	}
</script>

<style lang="less" scoped>
	.red {
		color: red;

	}

	.error {
		color: red;
		padding: 0 0rpx 24rpx 144rpx;
		font-weight: bolder;
		font-size: 24rpx;
	}

	.content {
		height: 100vh;
		background: #fff;
		padding: 24rpx;

		.flx {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;

			.name {
				font-family: Source Han Sans SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
				line-height: 34rpx;
			}

			.ipt {
				width: 532rpx;
				height: 70rpx;
				background: #F1F4F9;
				border-radius: 15rpx;
				padding: 0 16rpx;

				input,
				.picker,
				textarea {
					width: 100%;
					height: 100%;
				}

				.picker {
					line-height: 70rpx;
				}

				.placeholder {
					font-family: Source Han Sans SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999;
					line-height: 70rpx;
				}  
			}

			.ipt2 {
				height: 140rpx;

				textarea {
					padding-top: 16rpx;
				}

				.placeholder {
					line-height: 40rpx;
				}
			}
		}
	}

	.save {
		position: fixed;
		bottom: 5vh;
		left: 0;
		width: 90%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-family: Source Han Sans SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		opacity: 0.85;
		background-color: orange;
		border-radius: 50rpx;
		margin: 0 5%;
	}
</style>